<template>
  <!--数字选择框  -->
  <div class="mui-numbox" data-numbox-min='1' style="height:28px;">
    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
    <input ref="numbox" class="mui-input-numbox" type="number" :value="initcount" @change="changeCount" readonly/>
    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
  </div>
</template>


<script>
// 引入mui的js脚本文件（给数字框添加事件）
import mui from "../../lib/mui/js/mui.min.js"

export default {
  data() {
    return {
      
    }
  },
  methods: {
    changeCount() {
      // 拼接一个商品对象，改变store中对应的id的数量
      // console.log(this.id,this.initcount);
      var goods = {
        // 数值化
        id:parseInt(this.id),
        // 获取数字框中最新的数量
        count:parseInt(this.$refs.numbox.value)
      }
      // 调用store身上的changeCount方法
      this.$store.commit("changeCount",goods);
    }
  },
  props:["id","initcount"],
  // 当组件挂载到DOM上之后，初始化 numberbox
  mounted() {
    mui('.mui-numbox').numbox();
    // console.log(this.maxnum);
  },
  // 一进入获取不到最大值，必须在监听中得到最大值的库存量
  watch: {
    maxnum(newVal) {
      mui('.mui-numbox').numbox().setOption('max', newVal);
    }  
  }

}
</script>


<style lang = "scss" scoped >

</style>